<template>
  <el-container class="home-container">
    <el-aside :width="isCollapse ? '60px' : '200px'" class="home-aside">
      <!-- logo 区域 -->
      <div v-show="!isCollapse" class="home-logo">
        <img src="~@/assets/images/logo.png" alt />
      </div>

      <!-- 左侧导航 -->
      <el-menu :default-active="activeIndex" class="el-menu-vertical-demo home-left-nav" :collapse-transition="false" router :collapse="isCollapse" :unique-opened="true">
        <!-- 用户管理 -->
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/userlist"><i class="el-icon-menu"></i>用户列表</el-menu-item>
          <el-menu-item index="/userrights"><i class="el-icon-menu"></i>权限管理</el-menu-item>
        </el-submenu>
        <!-- 企业管理 -->
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>企业管理</span>
          </template>
          <el-menu-item index="/companys"><i class="el-icon-menu"></i>企业列表</el-menu-item>
        </el-submenu>
        <!-- 学科管理 -->
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>学科管理</span>
          </template>
          <el-menu-item index="/subject"> <i class="el-icon-menu"></i>学科 </el-menu-item>
          <el-menu-item index="/subject/sort"> <i class="el-icon-menu"></i>目录 </el-menu-item>
          <el-menu-item index="/subject/tag"> <i class="el-icon-menu"></i>标签 </el-menu-item>
        </el-submenu>
        <!--试题管理 -->
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>试题管理</span>
          </template>
          <el-menu-item index="/basics"><i class="el-icon-menu"></i>基础题库</el-menu-item>
          <el-menu-item index="/choiceness"><i class="el-icon-menu"></i>精选题库</el-menu-item>
          <el-menu-item index="/entry"><i class="el-icon-menu"></i>试题录入</el-menu-item>
          <el-menu-item index="/audit"><i class="el-icon-menu"></i>试题审核</el-menu-item>
          <el-menu-item index="/itemlist"><i class="el-icon-menu"></i>组题列表</el-menu-item>
        </el-submenu>
        <!-- 面试技巧 -->
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>面试技巧</span>
          </template>
          <el-menu-item index="/interview"><i class="el-icon-menu"></i>文章列表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="home-header">
        <div class="home-header-nav">
          <i class="el-icon-s-fold" @click="onCollapse"></i>
        </div>
      </el-header>
      <el-main class="home-main">
        <div>
          <!-- 顶部动态标签导航 -->
          <div class="page-tag-div">
            <el-tag class="page-tag" :effect="index === currentPageIdx ? 'dark' : 'plain'" :type="index === currentPageIdx ? '' : 'info'" :key="index" v-for="(item, index) in pageList" closable :disable-transitions="false" @click="jumpToPage(item.path)" @close="handleClose(index)">{{ item.tagName }}</el-tag>
          </div>
          <!-- 顶部动态标签导航   END -->
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  created () { },
  components: {},
  data () {
    return {
      isCollapse: false
    };
  },
  methods: {
    // 顶部动态导航
    jumpToPage (path) {
      this.$router.push(path);
    },
    handleClose (index) {
      this.$store.commit('removePageItem', index);
    },
    // 是否折叠菜单
    onCollapse () {
      this.isCollapse = !this.isCollapse
    }
  },
  computed: {
    pageList () {
      return this.$store.state.pageList;
    },
    currentPageIdx () {
      return this.$store.getters.currentPageIndex;
    },
    activeIndex () {
      // 匹配当前路由地址并在左侧导航栏高亮
      const paths = this.$route.path.split('/')
      return paths && paths.length > 1 ? paths.slice().join('/') : this.$route.path
    }
  }
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;

  .home-aside {
    background-color: #fff;
    border-right: 2px solid #eee;
    overflow: hidden;

    .home-logo {
      display: flex;
      // align-items: center;
      justify-content: center;
      // padding-left: 25px;
      // background-color: #00284d;
      height: 60px;
      img {
        height: 100%;
      }
    }

    .home-left-nav {
      border-right: unset;
      background-color: #fff;
    }
  }

  .home-header {
    background-color: #ffffff;
    margin-bottom: 10px;

    .home-header-nav {
      display: flex;
      align-items: center;
      height: 59px;
      border-bottom: 1px solid #f2f2f2;
      font-size: 25px;
      color: #686868;
    }
  }

  .home-main {
    background-color: #fff;
    position: relative;
    padding-top: 40px;

    .page-tag-div {
      position: absolute;
      top: 0;
    }
    .page-tag {
      margin-right: 8px;
      cursor: pointer;
      z-index: 999;
    }
    .page-tag:first-child {
      margin-left: 10px;
    }
    .el-tag-dark::before {
      display: inline-block;
      width: 1px;
      height: 1px;
      border-radius: 50%;
      background-color: #fff;
    }
  }
}
</style>
